<!-- 人员列表  -->
<template>
  <div class="candiDate">
    <div class="container">
      <el-row class="searchList">
        <el-col :span="16">
          <el-input
            placeholder="请输入姓名/电话"
            prefix-icon="el-icon-search"
            v-model="searchInfo"
            size="mini"
          >
          </el-input>
        </el-col>
        <el-col class="iconList" :span="8">
          <img class="" src="../assets/filter@2x.png" alt="" />
          <i class="el-icon-plus icon"></i>
        </el-col>
      </el-row>
      <div class="candidateList">
        <el-col>
          <ul>
            <li
              v-for="item in list"
              :key="item.title"
              :id="item.title"
              ref="singerItem"
            >
              <h3>{{ item.title }}</h3>
              <ul>
                <li
                  class="candiDateDetail"
                  v-for="data in item.data"
                  :key="data.id"
                >
                  <el-col :span="4">
                    <i class="userPic"> <img :src="data.imgurl" alt="" /> </i
                  ></el-col>
                  <el-col :span="9">
                    <span>{{ data.name }}</span>
                    <p>登记：{{ data.time }}</p>
                  </el-col>
                  <el-col :span="4">
                    <i class="already" v-if="data.companyFlag == '1'"></i>
                    <i class="yet" v-if="data.companyFlag == '2'"></i>
                  </el-col>
                </li>
              </ul>
            </li>
          </ul>
        </el-col>
        <el-col class="singerSort">
          <ul>
            <li
              v-for="(item, index) in listSort"
              :key="index + '^-^'"
              @click="onShortcutStart(item)"
              :data-index="index"
            >
              {{ item }}
            </li>
          </ul>
        </el-col>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "candiDate",
  data() {
    return {
      list: [
        {
          title: "A",
          data: [
            {
              name: "aaa",
              id: "1",
              imgurl: require("../assets/top.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "abc",
              id: "2",
              imgurl: require("../assets/tx2.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "azzzz",
              id: "5",
              imgurl: require("../assets/tx3.png"),
              time: "2020-12-12",
              companyFlag: "2",
            },
            {
              name: "axxxx",
              id: "6",
              imgurl: require("../assets/tx4.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "adddd",
              id: "7",
              imgurl: require("../assets/tx5.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
          ],
        },
        {
          title: "C",
          data: [
            {
              name: "cccc",
              id: "3",
              imgurl: require("../assets/tx4.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "ccd",
              id: "4",
              imgurl: require("../assets/tx3.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
          ],
        },
        {
          title: "D",
          data: [
            {
              name: "daa",
              id: "21",
              imgurl: require("../assets/tx3.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "dbc",
              id: "22",
              imgurl: require("../assets/tx3.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "dzzzz",
              id: "25",
              imgurl: require("../assets/top.png"),
              time: "2020-12-12",
              companyFlag: "2",
            },
            {
              name: "dxxxx",
              id: "26",
              imgurl: require("../assets/tx3.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "ddddd",
              id: "27",
              imgurl: require("../assets/tx5.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
          ],
        },
        {
          title: "E",
          data: [
            {
              name: "daa",
              id: "21",
              imgurl: require("../assets/tx2.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "dbc",
              id: "22",
              imgurl: require("../assets/tx5.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "dzzzz",
              id: "25",
              imgurl: require("../assets/tx4.png"),
              time: "2020-12-12",
              companyFlag: "2",
            },
            {
              name: "dxxxx",
              id: "26",
              imgurl: require("../assets/tx3.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "ddddd",
              id: "27",
              imgurl: require("../assets/tx2.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
          ],
        },
        {
          title: "F",
          data: [
            {
              name: "daa",
              id: "21",
              imgurl: require("../assets/tx2.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "dbc",
              id: "22",
              imgurl: require("../assets/tx2.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "dzzzz",
              id: "25",
              imgurl: require("../assets/tx5.png"),
              time: "2020-12-12",
              companyFlag: "2",
            },
            {
              name: "dxxxx",
              id: "26",
              imgurl: require("../assets/tx3.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "ddddd",
              id: "27",
              imgurl: require("../assets/tx4.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
          ],
        },
        {
          title: "G",
          data: [
            {
              name: "daa",
              id: "21",
              imgurl: require("../assets/tx2.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "dbc",
              id: "22",
              imgurl: require("../assets/tx5.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "dzzzz",
              id: "25",
              imgurl: require("../assets/tx4.png"),
              time: "2020-12-12",
              companyFlag: "2",
            },
            {
              name: "dxxxx",
              id: "26",
              imgurl: require("../assets/tx2.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "ddddd",
              id: "27",
              imgurl: require("../assets/tx3.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
          ],
        },
        {
          title: "H",
          data: [
            {
              name: "daa",
              id: "21",
              imgurl: require("../assets/tx2.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "dbc",
              id: "22",
              imgurl: require("../assets/tx5.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "dzzzz",
              id: "25",
              imgurl: require("../assets/tx2.png"),
              time: "2020-12-12",
              companyFlag: "2",
            },
            {
              name: "dxxxx",
              id: "26",
              imgurl: require("../assets/tx3.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "ddddd",
              id: "27",
              imgurl: require("../assets/tx4.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
          ],
        },
        {
          title: "I",
          data: [
            {
              name: "daa",
              id: "21",
              imgurl: require("../assets/tx2.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "dbc",
              id: "22",
              imgurl: require("../assets/tx5.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "dzzzz",
              id: "25",
              imgurl: require("../assets/tx3.png"),
              time: "2020-12-12",
              companyFlag: "2",
            },
            {
              name: "dxxxx",
              id: "26",
              imgurl: require("../assets/tx2.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "ddddd",
              id: "27",
              imgurl: require("../assets/tx3.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
          ],
        },
        {
          title: "J",
          data: [
            {
              name: "daa",
              id: "21",
              imgurl: require("../assets/tx2.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "dbc",
              id: "22",
              imgurl: require("../assets/tx4.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "dzzzz",
              id: "25",
              imgurl: require("../assets/tx5.png"),
              time: "2020-12-12",
              companyFlag: "2",
            },
            {
              name: "dxxxx",
              id: "26",
              imgurl: require("../assets/tx3.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
            {
              name: "ddddd",
              id: "27",
              imgurl: require("../assets/tx2.png"),
              time: "2020-12-12",
              companyFlag: "1",
            },
          ],
        },
      ],
      listSort: [],
      searchInfo: "",
      touch: {},
      currentIndex: 0,
      listHeight: [],
    };
  },
  mounted() {
    this.listSort = this.list.map((item) => {
      return item.title;
    });
    this.listSort = new Set(this.listSort);
  },
  methods: {
    onShortcutStart(ID) {
      document.querySelector("#" + ID).scrollIntoView({
        behavior: "smooth",
      });
    },
  }  
};
</script>
<style lang="less" scoped>
.candiDate {
  height: 100%;
  .container {
    width: 100%;
    height: 100%;
    padding: 0.16rem 0 0.16rem 0.16rem;
    box-sizing: border-box;
    .icon {
      margin-left: 0.2rem;
      font-size: 0.16rem;
      color: #5a6b80;
    }
    .searchList {
      width: 100%;
      .iconList {
        display: flex;
        height: 0.28rem;
        align-items: center;
        img {
          width: 0.2rem;
          margin-left: 0.1rem;
        }
      }
    }
    .candidateList {
      margin-top: 0.1rem;
      color: #5a6b80;
      font-size: 0.15rem;
      height: calc(100% - 0.28rem);
      overflow-y: auto;
      .singerSort {
        z-index: 30;
        left: 3.7rem;
        position: fixed;
        width: 0.2rem;
        li {
          padding-bottom: 0.05rem;
        }
      }
      h3 {
        width: 100%;
        height: 0.26rem;
        line-height: 0.26rem;
        font-size: 0.15rem;
      }

      .candiDateDetail {
        height: 0.4rem;
        position: relative;
        margin-top: 0.15rem;
        padding-bottom: 0.1rem;
        border-bottom: 1px solid #e5e5e5;
        i {
          display: inline-block;
          background-size: 100%;
          width: 0.55rem;
          height: 0.4rem;
        }
        .userPic {
          width: 0.32rem;
          height: 0.32rem;
          border-radius: 0.32rem;
          overflow: hidden;
          img {
            display: block;
            width: 100%;
          }
        }
        p {
          font-size: 0.12rem;
        }
        .already {
          background: url("../assets/already.png");
          background-size: 100%;
          background-repeat: no-repeat;
          position: relative;
          top: 0.15rem;
        }
        .yet {
          background: url("../assets/yet.png");
          background-size: 100%;
          background-repeat: no-repeat;
          position: relative;
          top: 0.15rem;
        }
      }
    }
  }
}
</style>